<template>
  <view class="c-br overflow-hidden bg-white mb-12px" v-if="props.orderInfo" @tap="emits('goToDetail', props.orderInfo!.orderId)">
    <view class="c-pd flex justify-between items-center pb-0">
      <view class="flex items-center">
        <image :src="props.orderInfo!.businessLogo" class="w-35px h-35px c-br"></image>
        <text class="ml-3">{{ props.orderInfo.businessName }}</text>
      </view>
      <view class="text-align-right">
        <text class="mb-3">{{ props.orderInfo.errorState === 3 ? '取消申请中' : props.orderInfo.orderState ? EOrderState[props.orderInfo!.orderState] : '未知状态' }}</text>
        <view class="flex items-center justify-end">
          <van-tag v-if="props.orderInfo.appointmentState !== 0" class="mr-2" :type="badgeStateShow(props.orderInfo!, 'appoint')">{{ EOrderAppointState[props.orderInfo.appointmentState] }}</van-tag>
          <van-tag v-if="props.orderInfo.payState !== 0" :type="badgeStateShow(props.orderInfo, 'pay')">{{ EOrderPayState[props.orderInfo.payState] }}</van-tag>
        </view>
      </view>
    </view>
    <view v-if="orderInfo?.goodsList.length === 1">
      <van-card :key="cIndex" v-for="(cItem, cIndex) in orderInfo?.goodsList" :price="orderInfo.realAmount" thumb-mode="aspectFill" :thumb="cItem.images">
        <text class="c-text-14 c-color-black fw-bold" slot="title">{{ cItem.name }}</text>
        <text style="float: right" slot="num">{{ '共' + orderInfo.goodsList.length + '件' }}</text>
        <view slot="desc">
          <view class="c-text-color-grey">呼叫器：{{ orderInfo!.beeperName }}</view>
          <view class="c-text-color-grey">日期：{{ orderInfo!.createDate }}</view>
        </view>
      </van-card>
    </view>
    <view class="flex items-center bg-white c-pd" v-else>
      <view class="w-80% overflow-x-auto">
        <scroll-view :show-scrollbar="true" :enable-flex="true" class="whitespace-normal flex" :scroll-x="true">
          <view class="mr-3" v-for="(cItem, cIndex) in orderInfo.goodsList" :key="cIndex">
            <image class="w-20 h-20 c-br" mode="aspectFill" :src="cItem.images" />
            <view class="c-text-10 font-bold text-align-center">{{ cItem.name }}</view>
          </view>
        </scroll-view>
      </view>
      <view class="w-20% text-align-end">
        <view class="mb-1 c-text-16 font-bold c-red">￥{{ orderInfo.realAmount }}</view>
        <view class="c-text-12">{{ '共' + orderInfo.goodsList.length + '件' }}</view>
      </view>
    </view>
    <view class="flex justify-between items-center c-pd pt-0" v-if="props.isBtn">
      <view @click.stop="">
        <text class="c-text-color-grey c-text-12">更多</text>
      </view>
      <view class="flex-1 text-align-end">
        <van-button type="primary" size="small" v-if="props.orderInfo.payType !== 5" @tap.stop="emits('repeatPlaceOrder', props.orderInfo)">再来一单</van-button>
        <van-button class="ml-3" type="primary" size="small" v-if="(props.orderInfo.payState === 1 || props.orderInfo.payState === 4) && props.orderInfo.orderState < 15" @tap.stop="emits('continuePay', props.orderInfo)">继续支付</van-button>
        <van-button class="ml-3" type="default" size="small" v-if="props.orderInfo!.orderType === 11 && props.orderInfo!.orderState < 15" @tap.stop="navigate({ url: `/subcontract/order/rescueProgress/index?orderId=${props.orderInfo.orderId}` })">救援进度</van-button>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { EOrderPayState, EOrderState, EOrderAppointState } from '@/enum/';
import { navigate } from '@/utils/navigate';

interface IProps {
  orderInfo: IOrderList;
  isBtn: boolean;
}

type EmitEvents = {
  (event: 'continuePay', payload: IOrderList): void;
  (event: 'repeatPlaceOrder', payload: IOrderList): void;
  (event: 'goToDetail', payload: number): void;
};

const props = defineProps<IProps>();
const emits = defineEmits<EmitEvents>();

const badgeStateShow = (state: IOrderList, type: string) => {
  let stateStyle = '';
  switch (type === 'appoint' ? state.appointmentState : state.payState) {
    case 1:
      stateStyle = 'default';
      break;
    case 4 | 3 | 7:
      stateStyle = 'danger';
      break;
    case 5:
      stateStyle = 'success';
      break;
    case 10:
      stateStyle = 'warning';
      break;
    case 15:
      stateStyle = 'warning';
      break;
    default:
      stateStyle = 'default';
      break;
  }
  if (type === 'appoint') {
    if (state.appointmentState) {
      return stateStyle;
    }
  } else {
    if (state.orderState !== 15) {
      return stateStyle;
    } else {
      return '';
    }
  }
};
</script>
